<template>
  <div class="main">
    <div class="air-column">
      <h2>乘机人</h2>
      <el-form class="member-info" :model="{ users }" ref="userForm">
        <div
          class="member-info-item"
          v-for="(item, index) in users"
          :key="index"
        >
          <el-form-item
            label="乘机人类型"
            :prop="`users[${index}].username`"
            :rules="[
              {
                required: true,
                message: ' 请输入乘机人',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              placeholder="姓名"
              class="input-with-select"
              v-model="item.username"
            >
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="成人" value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item
            label="证件类型"
            :prop="`users[${index}].id`"
            :rules="[
              {
                required: true,
                message: '请输入证件号',
                trigger: 'blur'
              },
              {
                pattern: /^\d{18}$/,
                message: '证件号码不合法',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              placeholder="证件号码"
              class="input-with-select"
              v-model="item.id"
            >
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="身份证" value="1" :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member" type="primary" @click="handleAddUsers"
        >添加乘机人</el-button
      >
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <div
          class="insurance-item"
          v-for="(item, index) in data.insurances"
          :key="index"
        >
          <el-checkbox
            :label="
              `${item.type}: $ ${item.price} / 份 * ${users.length}  最高赔付${item.compensation}`
            "
            border
            @change="handleInsurance(item.id)"
          >
          </el-checkbox>
        </div>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form
          label-width="68px"
          :model="{
            contactName,
            contactPhone,
            captcha
          }"
          :rules="contactRules"
          ref="contactForm"
        >
          <el-form-item label="姓名" prop="contactName">
            <el-input v-model="contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机" prop="contactPhone">
            <el-input placeholder="请输入内容" v-model="contactPhone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <el-input v-model="captcha"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" class="submit" @click="handleSubmit"
          >提交订单</el-button
        >
        <input type="hidden" :value="allPrice" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      users: [
        {
          username: "123",
          id: "441623197210132759"
        }
      ],
      insurances: [], // 保险数据
      contactName: "123", // 联系人名字
      contactPhone: "17665252439", // 联系人电话
      captcha: "000000", // 验证码
      invoice: false, // 发票
      contactRules: {
        contactName: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: "blur"
          }
        ],
        contactPhone: [
          {
            required: true,
            message: "请输人电话",
            trigger: "blur"
          }
        ],
        captcha: [
          {
            required: true,
            message: "请输手机验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 添加乘机人
    handleAddUsers() {
      this.users = [
        ...this.users,
        {
          username: "",
          id: ""
        }
      ];
    },

    // 移除乘机人
    handleDeleteUser(index) {
      this.users.splice(index, 1);
    },

    // 发送手机验证码
    handleSendCaptcha(con) {
      if (!this.contactPhone) {
        this.$confirm("手机号码不能为空", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning"
        });

        return;
      }

      if (this.contactPhone.length !== 11) {
        this.$confirm("手机号格式错误", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning"
        });

        return;
      }

      this.$axios({
        url: "/captchas",
        method: "post",
        data: {
          tel: this.contactPhone
        }
      }).then(res => {
        const { code } = res.data;
        this.$confirm(`模拟手机验证码为：${code}`, "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning"
        });
      });
    },

    // 提交订单
    async handleSubmit() {
      // // 1. 回调写法
      // this.$refs.userForm.validate(isValid=>{
      //     console.log(isValid);
      // })

      // // 2-1 普通 promise 写法
      // this.$refs.userForm.validate().then(isValid=>{
      //     console.log(isValide);
      // })

      // 2-2 promise 的 async / await 写法
      let userValid = await this.$refs.userForm.validate().catch(err => {});
      console.log(userValid);

      let contactValid = await this.$refs.contactForm
        .validate()
        .catch(err => {});
      console.log(contactValid);

      // 如果两个校验得出都为 true
      if (userValid && contactValid) {
        const data = {
          users: this.users,
          insurances: this.insurances,
          contactName: this.contactName,
          contactPhone: this.contactPhone,
          invoice: true,
          seat_xid: this.$route.query.seat_xid,
          air: this.$route.query.id,
          captcha: this.captcha
        };

        this.$axios({
          url: "/airorders",
          method: "post",
          data,
          headers: {
            // 完整的格式需要 Bearer 前缀
            // Authorization: 'Bearer xxxxxx'
            Authorization:
              "Bearer" + " " + this.$store.state.user.userInfo.token
          }
        }).then(res => {
          console.log(res.data);
          this.$router.push({
            path: "/air/pay",
            query: {
              id: res.data.data.id
            }
          });
        });
      }
    },

    // 选择保险
    handleInsurance(id) {
      // 存在去除
      if (this.insurances.indexOf(id) > -1) {
        let arr = this.insurances.slice(0);
        arr.splice(this.insurances.indexOf(id), 1);
        this.insurances = arr;
      } else {
        // 不存在添加到insurances
        this.insurances = [...new Set([...this.insurances, id])];
      }
    }
  },
  computed: {
    // 计算总价格
    allPrice() {
      // console.log(123);

      let price = 0;
      let len = this.users.length;

      price += this.data.seat_infos.org_settle_price * len;

      // console.log(price);

      this.insurances.forEach(v => {
        price += this.data.insurances[v - 1].price * len;
        // console.log(price);
      });

      price += this.data.airport_tax_audlet * len;

      // 触发设置总金额事件
      this.$emit("setAllPrice", price);

      return price;
    }
  }
};
</script>

<style scoped lang="less">
.air-column {
  border-bottom: 1px #ddd dashed;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.air-column h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: normal;
}

/deep/ .el-select .el-input {
  width: 130px;
}

.input-with-select {
  width: 590px;
}

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.member-info /deep/ .el-form-item {
  margin-bottom: 0;
}

.member-info-item {
  border-bottom: 1px #eee dashed;
  padding-bottom: 20px;
  position: relative;

  &:first-child {
    .delete-user {
      display: none;
    }
  }
}

.add-member {
  margin-top: 20px;
}

.delete-user {
  display: block;
  background: #ddd;
  width: 16px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: -30px;
  top: 50%;
}

.insurance {
  > div {
    margin-top: 10px;
  }
}

.insurance-item {
  margin-bottom: 20px;
}

.contact {
  /deep/ .el-input {
    width: 50%;
  }
}

.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}
</style>
